<template>
  <div>
    <el-row>
      <el-col>
        <el-form :inline="true" :model="formInline">
          <el-form-item>
            <el-select clearable size="mini" v-model="formInline.testBaseId" placeholder="请选择基地">
              <el-option v-for="item in testBase" :label="item.NAME" :value="item.ID"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input size="mini" v-model="formInline.name" placeholder="请输入实训室名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select clearable size="mini" v-model="formInline.region" placeholder="请选择状态">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row class="buttonList">
      <el-col>
        <el-button type="primary" size="mini" @click="newAdd">新增</el-button>
        <el-button type="primary" :disabled="editDisabled" size="mini" @click="edit">编辑</el-button>
        <el-button type="primary" :disabled="editDisabled" size="mini" @click="edit('view')">查看</el-button>
        <el-button type="primary" :disabled="editDisabled" size="mini"
                   @click="getStation(20, 1)">工位</el-button>
        <el-button type="primary" :disabled="editDisabled" size="mini" @click="open">打印</el-button>
        <el-button type="danger" size="mini">归档</el-button>
        <el-button type="danger" size="mini">取消归档</el-button>
        <el-button type="danger" size="mini">启/禁用</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <el-tree accordion highlight-current :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-col>
      <el-col :span="20">
        <el-table
                :data="tableData"
                border
                @selection-change="handleSelectionChange"
                size="mini"
                style="width: 100%">
          <el-table-column
                  align="center"
                  type="selection"
                  width="55">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="NAME"
                  width="240px"
                  label="实训室名称">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="TESTBASENAME"
                  label="基地名称">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="USERNAME"
                  label="负责人">
            <template slot-scope="scope">
              {{scope.row.USERNAME ? scope.row.USERNAME : scope.row.TESTNAME}}
            </template>
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="PHONE"
                  label="联系方式">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="STATUS"
                  label="状态">
            <template slot-scope="scope">
              {{scope.row.STATUS ? '启用' : '禁用'}}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                :page-sizes="[10, 20, 30, 50, 100]"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog title="实训室信息" :visible.sync="dialogFormVisible2" width="50%" center>
      <el-form :model="form2" ref="form" :label-width="formLabelWidth">
        <el-row>
          <el-col :span="12">
            <el-form-item
                    label="基地名称"
                    prop="testBaseId"
                    :rules="[{ required: true, message: '请选择基地名称！', trigger: 'change' }]"
            >
              <el-select clearable :disabled="isShow" size="mini" v-model="form2.testBaseId" placeholder="请选择基地">
                <el-option v-for="item in testBase" :label="item.NAME" :value="item.ID"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
                    prop="buildingId"
                    :rules="[{ required: true, message: '请选择建筑！', trigger: 'change' }]"
                    label="建筑名称">
              <el-select clearable :disabled="isShow" @change="(e) => buildChange(e, true)" size="mini" v-model="form2.buildingId" placeholder="请选择建筑">
                <el-option v-for="item in buildList" :label="item.NAME" :value="item.ID"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
                    prop="classroomId"
                    :rules="[{ required: true, message: '请选择房间号！', trigger: 'change' }]"
                    label="房间号">
              <el-select clearable :disabled="isShow" size="mini" v-model="form2.classroomId" collapse-tags multiple placeholder="请选择房间号">
                <el-option v-for="item in roomList" :label="item.NAME" :value="item.ID"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
                    prop="num"
                    :rules="[{ required: true, message: '请输入实训室编号！', trigger: 'blur' }]"
                    label="实训室编号">
              <el-input :disabled="isShow" size="mini" v-model="form2.num" placeholder="请输入实训室编号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
                    prop="name"
                    :rules="[{ required: true, message: '请输入实训室编号！', trigger: 'blur' }]"
                    label="实训室名称">
              <el-input :disabled="isShow" size="mini" v-model="form2.name" placeholder="请输入实训室名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
                    prop="station"
                    :rules="[{ required: true, message: '请输入工位数量！', trigger: 'blur' }]"
                    label="工位数">
              <el-input :disabled="isShow" type="number" size="mini" v-model="form2.station" placeholder="请输入工位数量"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              prop="userName"
              :rules="[{ required: true, message: '请输入管理员！', trigger: 'blur' }]"
              label="管理员">
              <el-input :disabled="isShow" size="mini" v-model="form2.userName" placeholder="请输入管理员"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              prop="phone"
              :rules="[{ required: true, message: '请输入管理员联系方式！', trigger: 'blur' }]"
              label="联系方式">
              <el-input :disabled="isShow" size="mini" v-model="form2.phone" placeholder="请输入管理员联系方式"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
                    label="实训项目">
              <el-input :disabled="isShow" size="mini" v-model="form2.item" placeholder="请输入实训项目"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="建设日期" class="dateStyle">
              <el-date-picker :disabled="isShow" value-format="yyyy-MM-dd" size="mini" type="date" placeholder="建设日期" v-model="form2.buildTime" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="需要安全准入">
              <el-switch :disabled="isShow" v-model="form2.isSafe"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提供预约服务">
              <el-switch :disabled="isShow" v-model="form2.isAppointment"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="工位信息" :visible.sync="dialogFormVisible" center width="90%">
      <el-row>
        <el-col :span="12">
          <el-button :disabled="stationFlag" type="primary" size="mini" @click="testEdit">编辑</el-button>
          <el-button :disabled="stationFlag" type="primary" size="mini" @click="testEdit('view')">查看</el-button>
          <el-button :disabled="stationMout" type="primary" size="mini" @click="stationList">打印</el-button>
          <el-button :disabled="stationMout" type="danger" size="mini">启/禁用</el-button>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-form :inline="true" :model="stationForm">
            <el-form-item>
              <el-input size="mini" v-model="stationForm.num" placeholder="请输入工位编号"></el-input>
            </el-form-item>
            <el-form-item>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="stationSearch">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-table
            :data="stationTable"
            border
            @selection-change="stationSelectionChange"
            size="mini"
            style="width: 100%">
            <el-table-column
                    align="center"
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
              align="center"
              prop="NUM"
              label="编号">
            </el-table-column>
            <el-table-column
              align="center"
              label="所属实训室">
              <template slot-scope="scope">
                {{selectId[0].NAME}}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="INSTRUMENTNAME"
              label="设备名称">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="ISTEACHER"
                    label="是否教师工位">
              <template slot-scope="scope">
                {{scope.row.ISTEACHER ? '是' : '否'}}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="CREATETIME"
              label="创建时间">
              <template slot-scope="scope">
                {{new Date(scope.row.CREATETIME).toLocaleString()}}
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
                  background
                  @size-change="stationSizeChange"
                  @current-change="stationCurrentChange"
                  layout="total, sizes, prev, pager, next, jumper"
                  :page-size="stationPagination.pageSize"
                  :total="stationPagination.total"
                  :page-sizes="[10, 20, 30, 50, 100]"
          >
          </el-pagination>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="工位信息" :visible.sync="dialogFormVisible3" center width="50%">
      <el-form :model="form" :label-width="formLabelWidth">
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属实训室">
              <el-input size="mini" v-model="form.name" autocomplete="off" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工位编号">
              <el-input size="mini" v-model="form.num" autocomplete="off" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="设备名称">
              <el-select clearable :disabled="isStation" size="mini" v-model="form.instrumentId" multiple placeholder="请选择设备">
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="教师工位">
              <el-switch :disabled="isStation" v-model="form.isTeacher"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible3 = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitStation">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-if="dialogFormVisible4" title="二维码" :visible.sync="dialogFormVisible4" center width="80">
      <div class="qrcode" ref="qrCodeUrl">{{selectId[0].NAME}}</div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible4 = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="print">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-if="dialogFormVisible5" title="二维码" :visible.sync="dialogFormVisible5" center width="80%">
      <div class="qrcode" ref="qrCodeUrl">{{selectId[0].NAME}}</div>
      <div class="station" style="display: flex; flex-wrap: wrap" ref="stationURl"></div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible5 = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="print">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-if="dialogFormVisible6" title="二维码" :visible.sync="dialogFormVisible6" center width="80%">
      <div class="station" style="display: flex; flex-wrap: wrap" ref="stationList"></div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible5 = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="print">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  export default {
    name: "trainRoom",
    data() {
      return{
        dialogFormVisible4: false,
        data: [],
        defaultProps: {
          children: 'list',
          label: 'NAME'
        },
        pagination: {
          pageSize: 20,
          total: 1,
          pageNo: 1
        },
        stationPagination: {
          pageSize: 20,
          total: 1,
          pageNo: 1
        },
        stationId: [],
        stationTable: [],
        dialogVisible: false,
        form2: {
          testBaseId: '',
          buildingId: '',
          classroomId: [],
          num: '',
          name: '',
          station: '',
          userName: '',
          phone: '',
          item: '',
          buildTime: '',
          isSafe: '',
          isAppointment: ''
        },
        form:{
          name: '',
          num: '',
          instrumentId: '',
          isTeacher: '',
        },
        formLabelWidth: '120px',
        dialogFormVisible: false,
        dialogFormVisible2: false,
        dialogFormVisible3: false,
        formInline: {},
        tableData: [],
        testBase: [],
        buildList: [],
        roomList: [],
        editDisabled: true,
        selectId: [],
        isEdit: false,
        isShow: false,
        isStation: false,
        stationForm: {},
        stationFlag: true,
        stationMout: true,
        codeList: [],
        dialogFormVisible5: false,
        dialogFormVisible6: false
      }
    },
    created() {
      this.getData();
      this.getTableData(this.pagination.pageSize, this.pagination.pageNo);
      this.$post('/testBase/findTestBase').then(res => {
        this.testBase = res.data.data.dataList;
      });
      this.$post('/building/findBuilding').then(res => {
        this.buildList = res.data.data.dataList;
      })
    },
    methods: {
      creatQrCode() {
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
          text: this.selectId[0].ID + '', // 需要转换为二维码的内容
          width: 200,
          height: 200,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
      },
      open() {
        this.$confirm('是否打印该实训室下所有工位二维码?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.dialogFormVisible5 = true;
          this.$nextTick(() => {
            this.creatQrCode()
            this.$post('/testBase/findTestStation', {testId: this.selectId[0].ID}).then(res => {
              this.codeList = res.data.data.dataList;
              const data = res.data.data.dataList;
              for(let i = 0; i < data.length; i++) {
                var stationURl = new QRCode(this.$refs.stationURl, {
                  text: data[0].ID + '',
                  width: 200,
                  height: 200,
                  colorDark: '#000000',
                  colorLight: '#ffffff',
                  correctLevel: QRCode.CorrectLevel.H
                })
              }
            })
          })
        }).catch(() => {
          this.dialogFormVisible4 = true;
          this.$nextTick(() => {
            this.creatQrCode()
          })
        });
      },
      print() {
        window.print()
      },
      stationList() {
        this.dialogFormVisible6 = true;
        this.$nextTick(() => {
          for(let i = 0; i < this.stationId.length; i++) {
            var stationList = new QRCode(this.$refs.stationList, {
              text: this.stationId[i].ID + '',
              width: 200,
              height: 200,
              colorDark: '#000000',
              colorLight: '#ffffff',
              correctLevel: QRCode.CorrectLevel.H
            })
          }
        });
      },
      getData() {
        this.$post('/public/findStructureByTestBase').then(res => {
          this.data = res.data.data;
        })
      },
      search() {
        this.$post('/testBase/findTest', {
          pageSize:this.pagination.pageSize,
          pageNo: 1,
          name: this.formInline.name,
          testBaseId: this.formInline.testBaseId,
          status: this.formInline.status
        }).then(res => {
          if(res.data.status != 1) {
            this.$message.error('条件输入错误，请检查');
            return;
          }
          this.pagination.total = res.data.data.total;
          this.tableData = res.data.data.dataList;
        })
      },
      getTableData(pageSize, pageNo) {
        this.$post('/testBase/findTest', {pageSize,pageNo}).then(res => {
          this.tableData = res.data.data.dataList;
          this.pagination.total = res.data.data.total;
        })
      },
      buildChange(buildingId, clearData) {
        this.$post('/public/findClassroomByBuildingId', {buildingId: buildingId}).then(res => {
          if (clearData) this.form2.classroomId = []
          this.roomList = res.data.data
        })
      },
      submitForm() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            let url = '';
            if(this.isEdit) {
              url = '/testBase/updateTest'
            } else {
              url = '/testBase/addTest'
            }
            const req = { ...this.form2 }
            req.classroomId = req.classroomId.join();
            if(req.isAppointment) {
              req.isAppointment = 1
            } else {
              req.isAppointment = 0
            }
            if(req.isAppointment) {
              req.isSafe = 1
            } else {
              req.isSafe = 0
            }
            this.$post(url, req).then(res => {
              if(res.data.status === 1){
                this.$message.success('保存成功');
                this.getTableData(this.pagination.pageSize, this.pagination.pageNo);
                this.dialogFormVisible2 = false;
                this.isEdit = false;
              } else{
                this.$message.error(res.data.msg)
              }
            });
          } else {
            return false;
          }
        });
      },
      newAdd() {
        this.form2 = {
          testBaseId: '',
          buildingId: '',
          classroomId: [],
          num: '',
          name: '',
          station: '',
          userName: '',
          phone: '',
          item: '',
          buildTime: '',
          isSafe: '',
          isAppointment: ''
        }
        this.dialogFormVisible2 = true;
        this.isShow = false
      },
      edit(flag) {
        if(flag === 'view') {
          this.isShow = true
        } else {
          this.isShow = false
        }
        this.isEdit = true;
        this.dialogFormVisible2 = true;
        this.form2.testBaseId = this.selectId[0].TESTBASEID;
        this.form2.buildingId = this.selectId[0].BUILDINGID;
        this.buildChange(this.selectId[0].BUILDINGID)
        this.form2.classroomId = this.selectId[0].CLASSROOMID.split(',').map(ite => 1 * ite);
        this.form2.num = this.selectId[0].NUM;
        this.form2.name = this.selectId[0].NAME;
        this.form2.station = this.selectId[0].STATIONNUM;
        this.form2.userName = this.selectId[0].USERNAME ? this.selectId[0].USERNAME : this.selectId[0].TESTNAME;
        this.form2.phone = this.selectId[0].PHONE;
        this.form2.item = this.selectId[0].ITEM;
        this.form2.buildTime = this.selectId[0].BUILDTIME;
        this.form2.isSafe = this.selectId[0].ISSAFE ? true : false;
        this.form2.isAppointment = this.selectId[0].ISAPPOINTMENT ? true : false;
        this.form2.id = this.selectId[0].ID;
      },
      getStation(pageSize, pageNo) {
        this.$post('/testBase/findTestStation', {testId: this.selectId[0].ID, pageSize, pageNo}).then(res => {
          this.stationTable = res.data.data.dataList;
          this.stationPagination.total = res.data.data.total;
          this.dialogFormVisible = true;
        })
      },
      stationSearch() {
        this.$post('/testBase/findTestStation', {num: this.stationForm.num,pageSize: 10, pageNo: 1}).then(res => {
          this.stationTable = res.data.data.dataList;
          this.stationPagination.total = res.data.data.total;
        })
      },
      testEdit(flag) {
        if(flag === 'view') {
          this.isStation = true
        } else {
          this.isStation = false
        }
        this.dialogFormVisible3 = true;
        this.form.name = this.selectId[0].NAME;
        this.form.num = this.stationId[0].NUM;
        this.form.id = this.stationId[0].ID;
        this.form.isTeacher = this.stationId[0].ISTEACHER ? true : false;
      },
      submitStation() {
        if(this.form.isTeacher) {
          this.form.isTeacher = 1
        } else {
          this.form.isTeacher = 0
        }
        this.$post('/testBase/updateTestStation', this.form).then(res => {
          if(res.data.status === 1) {
            this.$message.success('修改成功');
            this.dialogFormVisible3 = false;
          } else {
            this.$message.error('请求失败，请稍后再试');
          }
        })
      },
      handleSelectionChange(val) {
        this.selectId = val;
        if(val.length === 1) {
          this.editDisabled = false;
        } else {
          this.editDisabled = true;
        }
      },
      stationSelectionChange(val) {
        this.stationId = val;
        if(val.length === 1) {
          this.stationFlag = false;
        } else {
          this.stationFlag = true;
        }
        if(val.length > 1) {
          this.stationMout = false;
        } else {
          this.stationMout = true;
        }
      },
      stationSizeChange(size) {
        this.stationPagination.pageSize = size;
        this.getStation(size, this.stationPagination.pageNo);
      },
      stationCurrentChange(page) {
        this.stationPagination.pageNo = page;
        this.getStation(this.stationPagination.pageSize, page);
      },
      handleSizeChange(size) {
        this.pagination.pageSize = size;
        this.getTableData(size, this.pagination.pageNo);
      },
      handleCurrentChange(page) {
        this.pagination.pageNo = page;
        this.getTableData(this.pagination.pageSize, page);
      },
      handleNodeClick(data, node) {
        if(node.level === 3) return;
        this.node = node;
        let departmentId = '';
        let testBaseId = '';
        if(node.level === 1) {
          departmentId = node.data.ID;
        }
        if(node.level === 2) {
          testBaseId = node.data.ID;
        }
        this.$post('/testBase/findTest',
                {
                  pageSize: this.pagination.pageSize,
                  pageNo: 1,
                  departmentId: departmentId,
                  testBaseId: testBaseId
                }
        ).then(res => {
          this.tableData = res.data.data.dataList;
          this.pagination.total = res.data.data.total;
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .dateStyle{
    /deep/.el-input__inner {
      padding-left: 30px !important;
    }
  }
  /deep/.el-form-item__error {
    top: 32px;
  }
  .qrcode {
    text-align: center;
    /deep/img {
      margin: 0 auto;
    }
  }
  .station {
    /deep/img {
      margin: 20px;
    }
  }
</style>
